export default function Tables() {
  return (
    <div className="flex justify-center">
      {/* 左对齐 */}
      <table className="text-left">
        {/* 背景色，下划线 */}
        <thead className="bg-slate-100 border-b">
          <tr>
            <th className="px-4 py-2">Name</th>
            <th className="px-4 py-2">Title</th>
            <th className="px-4 py-2">Email</th>
          </tr>
        </thead>
        <tbody>
          {persons.map((person) => (
            // 奇数行白色，偶数行灰色
            <tr key={person.email} className="odd:bg-white even:bg-slate-50">
              <td className="px-4 py-2 text-sm">{person.name}</td>
              <td className="px-4 py-2 text-sm text-slate-400">{person.title}</td>
              <td className="px-4 py-2 text-sm text-slate-400">{person.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

const persons = [
  { name: "Jane Cooper", title: "Regional Paradigm Technician", email: "jane.cooper@example.com" },
  { name: "Cody Fisher", title: "Product Directives Officer", email: "cody.fisher@example.com" },
  { name: "Leonard Krasner", title: "Senior Designer", email: "leonard.krasner@example.com" },
  { name: "Emily Selman", title: "VP, Hardware Engineering", email: "emily.selman@example.com" },
  { name: "Anna Roberts", title: "Chief Strategy Officer", email: "anna.roberts@example.com" }
]